<template>
  <div class="application">
		<Button style="margin: 10px 0;" type="primary" @click="backList">返回应用列表</Button>
    <Row class="application-index-top">
			<Col span="12">
				<img src="@/assets/images/application-logo.png" class="application-index-logo">
				<div class="application-index-top-box">
					<div class="application-index-top-title">{{containerName}}</div>
					<div class="application-index-top-address">
						<img src="../../../static/images/positioning.png">访问地址：
						<a href="#" target="_blank">{{myUrl}}</a>
					</div>
				</div>
				<!-- <ul class="buttonBox">
					<li @click="changeStatus(item.value)" v-for="item in statusList" :class="{select:buttonIndex==item.value}" :key="item.value">
						<i></i>
						<div>{{item.label}}</div>
					</li>
				</ul> -->
			</Col>
			<Col span="12" class="application-index-top-btns">
				<a href="javascript:void(0)" v-for="(item, index) in menus" @click="routTo(item.path)" :class="{'active': currentMenu === item.path && item.path !== ''}" :key="index"><i :class="item.icon"></i><br>{{item.name}}</a>
			</Col>
		</Row>
		<router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menus: [
				{
					name: '总览',
					icon: 'application-index',
					path: 'applicationHome'
				},
				{
					name: '日志',
					icon: 'application-log',
					path: 'applicationLog'
				},
				{
					name: '伸缩',
					icon: 'application-flex',
					path: 'applicationFlex'
				},
        {
          name: '存储',
          icon: 'application-storage',
          path: 'applicationStorage'
        },
        {
          name: '使用手册',
          icon: 'application-port',
          path: 'applicationPort'
        }
			],
			currentMenu: 'applicationHome',
			appList: [],
			buttonIndex: 0,
			statusList: [
				{
					value: 1,
					label: '启动'
				},
				{
					value: 2,
					label: '停止'
				},
				{
					value: 3,
					label: '重启'
				}
			],
			// 应用名称
			containerName: '',
			// 调用地址
			myUrl: ''
    }
  },
  methods: {
		routTo: function (name) {
			this.currentMenu = name
			this.$router.push({
        name: name
      })
		},
		appto (item) {
			if (item.metadata.name === 'bc') {
				this.$router.push({
					name: 'bcapplicationHome'
				})
			} else {
				this.$router.push({
					name: 'applicationHome'
				})
			}
		},
		changeStatus (index) {
			this.buttonIndex = index
			this.$store.dispatch('status', index)
		},
		// 返回应用列表
		backList () {
			this.$router.push({
				name: 'podList'
			})
		}
  },
  mounted () {
		this.$api.get(0, '/kuber/con/page/info?page=1&limit=5&owner=' + sessionStorage.username + '&containerName=' + sessionStorage.containerName, {}, r => {
			if (r.data.code === 0) {
				let myDate = r.data.data.data[0]
				this.containerName = myDate.podName
				this.$api.get(0, '/kuber/con?containerName=' + this.containerName + '&owner=' + sessionStorage.username, {}, r => {
					if (r.data.code === 0) {
						let myuuid = r.data.data.uuid
						this.$api.get(0, '/kuber/description?uuid=' + myuuid, {}, r => {
							if (r.data.code === 0) {
								// 调用地址
								this.myUrl = r.data.data.url + ':' + r.data.data.port
							}
						})
					}
				})
			}
		})
  }
}
</script>

<style lang="less">
.application{
	color: #101010;
}
.application-index-top{
	padding: 20px 0;
	background-color: #ffffff;
}
.application-index-logo{
	float: left;
	width: 90px;
	height: 90px;
	margin: 0 40px;
}
.application-index-top-title{
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 5px;
	span{
		margin-left: 10px;
		padding-left: 10px;
		font-size: 12px;
		color: #848484;
		border-left: 1px solid #ec9a9f;
	}
}
.application-index-top-btns{
	border-left: 1px solid #f2f2f2;
	a{
		display: inline-block;
		width: 12.11%;
		text-align: center;
		font-size: 18px;
		color: #101010;
		i{
			display: inline-block;
			width: 60px;
			height: 60px;
			&.application-index{
				background: url(../../../static/images/application-index.png) center no-repeat;
			}
			&.application-monitor{
				background: url(../../../static/images/application-monitor.png) center no-repeat;
			}
			&.application-log{
				background: url(../../../static/images/application-log.png) center no-repeat;
			}
			&.application-flex{
				background: url(../../../static/images/application-flex.png) center no-repeat;
			}
			&.application-rely{
				background: url(../../../static/images/application-rely.png) center no-repeat;
			}
			&.application-storage{
				background: url(../../../static/images/application-storage.png) center no-repeat;
			}
			&.application-port{
				background: url(../../../static/images/application-port.png) center no-repeat;
			}
			&.application-plug{
				background: url(../../../static/images/application-plug.png) center no-repeat;
			}
			&.application-set{
				background: url(../../../static/images/application-set.png) center no-repeat;
			}
		}
		&.active, &:hover{
			color: #d00210;
			i{
				&.application-index{
					background: url(../../../static/images/application-index-active.png) center no-repeat;
				}
				&.application-monitor{
					background: url(../../../static/images/application-monitor-active.png) center no-repeat;
				}
				&.application-log{
					background: url(../../../static/images/application-log-active.png) center no-repeat;
				}
				&.application-flex{
					background: url(../../../static/images/application-flex-active.png) center no-repeat;
				}
				&.application-rely{
					background: url(../../../static/images/application-rely-active.png) center no-repeat;
				}
				&.application-storage{
					background: url(../../../static/images/application-storage-active.png) center no-repeat;
				}
				&.application-port{
					background: url(../../../static/images/application-port-active.png) center no-repeat;
				}
				&.application-plug{
					background: url(../../../static/images/application-plug-active.png) center no-repeat;
				}
				&.application-set{
					background: url(../../../static/images/application-set-active.png) center no-repeat;
				}
			}
		}
	}
}
.application-index-top-address{
	font-size: 14px;
	height: 32px;
	line-height: 32px;
  margin-top: 18px;
	img{
		margin-right: 16px;
		height: 32px;
		vertical-align: middle;
	}
	a{
		color: #333;
	}
}
.ivu-layout.ivu-layout-has-sider > .ivu-layout, .ivu-layout.ivu-layout-has-sider > .ivu-layout-content{
	overflow-x: visible;
}
@media(max-width:1366px){
	div.main{
		overflow:auto
	}
}
div.application{
	ul.buttonBox{
		float: right;
		li{
			float: left;
			margin-right: 20px;
			text-align: center;
			i{
				display: block;
				width: 44px;
				height: 44px;
				background-repeat: no-repeat;
				margin-bottom: 30px;
			}
			&.select{
				color: #d00210
			}
			&:nth-child(1){
				i{
					background-image: url(../../../static/images/start.png);
				}
				&.select i{
					background-image: url(../../../static/images/start_select.png);
				}
			}
			&:nth-child(2){
				i{
					background-image: url(../../../static/images/end.png);
				}
				&.select i{
					background-image: url(../../../static/images/end_select.png);
				}
			}
			&:nth-child(3){
				i{
					background-image: url(../../../static/images/reset.png);
				}
				&.select i{
					background-image: url(../../../static/images/reset_select.png);
				}
			}
		}
	}
	.application-index-top-box{
		float: left;
	}
}
</style>
